<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
        <li v-for="item in list" :key="item.id">{{item.id}} {{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import listModule from "../vuex/module";
import * as api from "../tools/axios";
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Hello'
    }
  },asyncData({store,route}){
    console.log('hello asyncData');
    store.registerModule('hello',listModule);
    return api.getlist().then(res=>{
      store.dispatch('hello/setlist',res.data)
    })
     
  },computed:{
    list(){
      return this.$store.state.hello.list
    }
  },destroyed(){
    this.$store.unregisterModule('hello')
  }
}
</script>
